<template>
  <div>
    <el-card>
      <el-row style="margin-bottom: 20px; font-size: 15px">
        <el-col :span="4"
          >显示边框: <el-switch size="small" v-model="showBorder"> </el-switch
        ></el-col>
        <el-col :span="4"
          >显示斑马纹: <el-switch size="small" v-model="showStripe"> </el-switch
        ></el-col>
        <el-col :span="4"
          >显示索引: <el-switch size="small" v-model="showIndex"> </el-switch
        ></el-col>
        <el-col :span="4"
          >显示多选框:
          <el-switch size="small" v-model="showCheckbox"> </el-switch
        ></el-col>
        <el-col :span="4"
          >显示表头: <el-switch size="small" v-model="showHeader"> </el-switch
        ></el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-radio-group v-model="sizeValue">
          <el-radio label="small">默认</el-radio>
          <el-radio label="medium">medium</el-radio>
          <el-radio label="small">small</el-radio>
          <el-radio label="mini">mini</el-radio>
        </el-radio-group>
      </el-row>
      <avue-crud
        :data="tableData"
        :option="option"
        v-model="form"
        :page.sync="page"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
        reserveSelection
        @on-load="onLoad(page)"
        @row-save="rowSave"
      ></avue-crud>
    </el-card>
  </div>
</template>
<script>
import { request } from "../../api/request";
export default {
  data() {
    return {
      page: {
        pageSize: 5,
        pagerCount: 1,
      }, //分页数据
      tableData: [], // 角色列表
      showBorder: false,
      showStripe: false,
      showHeader: true,
      showIndex: true,
      showCheckbox: false,
      sizeValue: "small",
      timer: null,
      form: {},
    };
  },
  computed: {
    option() {
      return {
        border: this.showBorder,
        stripe: this.showStripe,
        showHeader: this.showHeader,
        index: this.showIndex,
        size: this.sizeValue,
        selection: this.showCheckbox,
        page: this.showPage,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "角色名称",
            prop: "rolename",
          },
          {
            label: "创建者",
            prop: "creator",
          },
          {
            label: "权限字符",
            prop: "rules",
          },
        ]
      };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 提交表单
    rowSave(form,done){
      console.log("提交");
      console.log(form);
      done()
    },
    // 分页
    onLoad(e) {
      console.log(e);
    },
    selectionChange(list) {
      console.log(list);
    },
    toggleSelection(val) {
      this.$refs.crud.toggleSelection(val);
    },
    // 刷新表格
    refreshChange() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getList();
      }, 1000);
    },
    getList() {
      request({
        pageNum: this.page.pagerCount,
        pageSize: this.page.pageSize,
        method: "get",
        url: "role",
        route: "getList",
      }).then((res) => {
        if (res.code != "200") return this.$message.error("查询角色信息失败");
        console.log(res);
        this.tableData = res.data.rows;
        console.log(this.tableData);
        this.$message.success("查询角色列表成功");
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>